<template>
	<view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<u-popup :show="showBox" mode="center" @close="showBox = false">
			<!-- <view>保养提交</view> -->
			<!-- <u-input v-model="causeTxt" type="text" border="true" /> -->
			<uni-forms-item label="情况" label-align="right" name="causeTxt" required>
				<uni-easyinput type="text" v-model="causeTxt" placeholder="请输入保养情况" />
			</uni-forms-item>
			<uni-forms-item label="图片" name="picture">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</uni-forms-item>
			<button @click="AddTaskPoint">提交</button>
		</u-popup>
		<uni-list>
			<uni-list-item v-for="(item, index) in taskDetail" :title="item.deviceName"
				:note="item.maintenanceStandardName" showArrow clickable :rightText="item.state == 1 ? '完成' : '未完成'"
				@click="ToDetail(item)" />
		</uni-list>
	</view>
</template>

<script>
	import {
		getMaintenanceTask,
		uploadFile,
		putMaintenanceDetail
	} from '@/api/system/user.js';
	export default {
		data() {
			return {
				UserId: '',
				taskId: '',
				taskDetail: [],
				showBox: false,
				fileList1: [],
				causeTxt: '',
				imageValue: [],
				picTxt: '',
				maintenanceDetail: '',
				msgType: 'success',
				messageText: '这是一条成功提示'
			};
		},
		onLoad(option) {
			try {
				this.UserId = uni.getStorageSync('userID');
				if (this.UserId) {
					console.log(this.UserId);
				}
			} catch (e) {
				// error
			}
			if (option.id) {
				this.taskId = option.id * 1;
				this.GetMaintenanceDetail(this.taskId);
			}
		},
		methods: {
			GetMaintenanceDetail(id) {
				getMaintenanceTask(id).then((res) => {
					this.taskDetail = res.rows;
					console.log('id', res);
				});
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				// const result = '';
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFile(lists[i].url).then((res) => {
						// console.log(res);
						return res.url;
					});
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
					console.log('fileList1', this.fileList1);
				}
			},
			ToDetail(item) {
				this.maintenanceDetail = item;
				this.showBox = true;
			},
			AddTaskPoint() {
				this.fileList1.map((item) => {
					this.imageValue.push(item.url);
				});
				this.picTxt = this.imageValue.toString();
				const dataForm = {
					id: this.maintenanceDetail.id,
					maintenanceId: this.taskId,
					maintenanceDeviceId: this.maintenanceDetail.deivceId,
					serviceId: this.UserId,
					picture: this.picTxt,
					cause: this.causeTxt,
					checkState: 1
				};
				if (this.causeTxt) {
					putMaintenanceDetail(dataForm).then((res) => {
						if (res.code == 200) {
							this.showBox = false;
							this.msgType = 'success';
							this.messageText = `保养提交成功`;
							this.$refs.message.open();
							this.GetMaintenanceDetail(this.taskId);
						}
					});
				} else {
					this.msgType = 'error';
					this.messageText = `必填项不得为空`;
					this.$refs.message.open();
					console.log('内容缺失');
				}

			}
		}
	};
</script>

<style></style>